<div class="set-of-icons" ref:annotation >
  <div style="position: relative;height: 10px;">
    <div style="position: absolute; left: 0px; top: 1px;background-color:{color}; border-radius: 50%; width: 8px; height: 8px;"></div>
    <div style="position: relative; top: 4px; margin: 0 4px; border-top: solid 2px {color}; "></div>
    <svg style="position: absolute; right: 0; top: 0;" width=10 height=10 viewBox="0 0 10 10">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="{color}" />
    </svg>
  </div>
  <div ref:icons class="icons" style="height: {iconHeight}px;">
    {#each imgList as icon, i}
      <ClippedIcon
        icon={icon}
        width={iconHeight}
        {config}
      />
    {/each}
  </div>
</div>

  <AtlasDataLoader 
    id={fullId}
    bind:config
    bind:layers 
  />

<script>
export default {
  components: { 
    ClippedIcon: "./ClippedIcon.html",
    AtlasDataLoader: './AtlasDataLoader.html', 
  },
  data() {
    return {
      container: null,
      arrow: null,
      arrowHeight: 30,
      imgList: [],
      color: '#ff6600',
      iconHeight: 100,
      width: 100,
      height: 100
    }
  },
  computed: {
    fullId: ({layerName}) => "inceptionv1_" + layerName,
    imgList: ({pointList, layers, pathZoomIndex}) => {
        let imgList = [];
        pointList.forEach((globalPosPercent) => {
          if(layers && layers[pathZoomIndex]) {
            const gridSelected = {
              // assumes layers is always square
              x: Math.floor(globalPosPercent[0] * layers[pathZoomIndex].length),
              y: Math.floor(globalPosPercent[1] * layers[pathZoomIndex].length),
            }
            if(layers[pathZoomIndex][gridSelected.y] && 
              layers[pathZoomIndex][gridSelected.y][gridSelected.x]){
              const currentIcon = layers[pathZoomIndex][gridSelected.y][gridSelected.x];
              if(currentIcon.num_activations > 0){
                imgList.push(layers[pathZoomIndex][gridSelected.y][gridSelected.x]);
              }
            }
          }
        });
        return imgList;
    },
    pathZoomIndex: ({layers}) => {
      if(layers){
        return layers.length - 1
      }
      return 1
    },
  }
}
</script>

<style>
  .icons {
    margin-top: 8px;
    display: grid;
    grid-gap: 1px;
    grid-auto-flow: column;
    overflow: hidden;
    border-radius: 8px;
  }
</style>